<template>
  <div class="branchManageBox">
    <el-row :gutter="20">
      <el-col :span="6">
        <div style="margin-top: 15px">
          <el-input
            placeholder="请输入名称"
            class="input-with-select"
            v-model.trim="params.query"
            @clear="getSearchBranchManage"
            @keydown.native.enter="getSearchBranchManage"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getSearchBranchManage"
            ></el-button>
          </el-input>
        </div>
      </el-col>
      <el-col :span="2" :offset="10">
        <div style="margin-top: 15px">
          <el-button icon="el-icon-s-check" type="text" @click="saveSort"
            >保存排序</el-button
          >
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple" style="margin-top: 15px">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="$router.push({ name: 'AddBranch' })"
            >新增分公司</el-button
          >
        </div>
      </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="branchId" label="ID" width="80"> </el-table-column>
      <el-table-column prop="companyName" label="分公司名称" width="180">
      </el-table-column>
      <el-table-column prop="companyAddress" label="公司地址" width="250">
      </el-table-column>
      <el-table-column prop="telNumber" label="电话" width="180">
      </el-table-column>
      <el-table-column prop="website" label="网站" width="180">
      </el-table-column>
      <el-table-column label="排序" width="80">
        <template slot-scope="props">
          <el-input
            v-model="props.row.sort"
            value="props.row.sort"
            @change="insert(props.row)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="toEditBranch(scope.row)"
            >编辑</el-button
          >
          <span>|</span>
          <el-button type="text" @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="margin: 40px 0 0 300px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="params.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalpage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      totalpage: 0, //总页数
      params: {
        query: "",
        pagenum: 1,
        pagesize: 5,
      },
      changeList: [],
    };
  },
  created () {
    this.initBranchManage();
  },
  methods: {
    //初始化分公司管理列表
    async initBranchManage () {
      let {
        data: { list, pagenum, totalpage },
      } = await this.$http.getBranchCompany(this.params);

      this.tableData = list;
      // this.params.pagenum = pagenum;
      this.totalpage = totalpage;
      // console.log(this.params.pagenum);
    },
    //分页功能
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.params.pagesize = val;
      this.initBranchManage();
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.params.pagenum = val;
      this.initBranchManage();
    },

    //搜索功能
    getSearchBranchManage () {
      this.initBranchManage();
    },

    // 删除功能
    async handleDelete (index, item) {
      console.log(index);
      console.log(item);
      //1  判断是否真的要删除  如果 点击取消删除 那么什么都不做 给出取消删除的提示
      // 2 如果是真的要删除  发送ajax 请 求  判断回来的数据 请求成功后 执行删除的提示
      // 3 重新加载页面
      let res = await this.$confirm("此操作将永久删除该文件, 是否继续?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch(() => { }); // 这里的取消必须加上一个catch 的回调函数
      if (res != "confirm") return this.$message.info("取消删除");
      let {
        meta: { status },
      } = await this.$http.getDeleteBranchCompany({ id: item.branchId });
      // console.log(status);
      if (status == 200) {
        this.$message.success("删除成功");
        this.initBranchManage(); // 3 重新加载页面
      } else {
        this.$message.error("删除失败");
      }
    },

    async insert (row) {
      // delete data.sort
      const params = { branchId: row.branchId, sort: row.sort }
      let res = await this.$http.getModifyBranch(params);
      this.$message.success("修改排序成功");
      // console.log(res);
    },
    // 保存当前排序
    async saveSort () {
      this.$confirm("是否保存当前排序?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let params = this.changeList;
          console.log(params);
          let {
            data: { status },
          } = await this.$http.getModifyBranch(params);
          if (status == 200) {
            this.$message({
              type: "success",
              message: "保存排序！",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "保存失败",
          });
          this.initBranchManage();
        });
    },

    // 保存当前id
    toEditBranch (val) {
      // console.log(val);
      this.$store.commit("setBranchId", val.branchId);
      this.$store.commit("setBranchVal", val);
      this.$router.push(`/editBranch`);
    },
  },
};
</script>

<style lang="less" scoped>
.branchManageBox {
  width: 100%;
  min-width: 1200px;
  margin-left: 30px;
}
span {
  display: inline-block;
  color: #d7d7d7;
  margin: 0 5px;
}
</style>